<template>
  <slide-view
    v-loading="loading"
    :listener-ids="listenerIDs"
    :no-listener-ids="noListenerIDs"
    :no-listener-class="noListenerClass"
    :body-style="{padding: 0, height: '100%', background: 'white'}"
    class="d-view"
    @afterEnter="getDetail"
    @close="hideView">
    <flexbox
      v-if="detailData"
      direction="column"
      align="stretch"
      style="padding: 0 15px;"
      class="side-detail-main">
      <wk-detail-header>
        <div slot="body" class="employee-header" style="display: flex;align-items:center;">
          <div>
            <input
                id="inputFile"
                type="file"
                accept="image/png, image/jpeg, image/gif, image/jpg"
                style="display: none;"
                @change="uploadFile">
            <edit-image
                :show="showEditImage"
                :file="editFile"
                :image="editImage"
                @save="submitImage"
                @close="showEditImage=false" />
          </div>
          <div @click="handleChangeAvatar">
            <flexbox class="user-box">
              <xr-avatar
                  :name="detailData.realName"
                  :size="90"
                  :src="detailData.img"
                  class="user-img" />
            </flexbox>
          </div>
          <div style="margin-top: 20px;">
          <div class="employee-header__top">
            <span class="name">{{ detailData.employeeName }}</span>
            <span class="post">{{ detailData.jobTitle }}</span>
          </div>
            <div class="employee-header__bottom">
              <el-tag
                v-if="detailData.sex === 1 || detailData.sex ===2"
                :class="{
                  1: 'is-man',
                  2: 'is-woman',
                }[detailData.sex]"
                disable-transitions
                class="xr-sex-tag"
                size="mini">
                <i
                  :class="{
                    1: 'wk wk-man',
                    2: 'wk wk-woman',
                  }[detailData.sex]" />
              </el-tag>

<!--              <el-tooltip-->
<!--                :content="`工号：${detailData.jobNumber|| '&#45;&#45;'}`"-->
<!--                effect="dark"-->
<!--                placement="top">-->
<!--                <el-tag-->
<!--                  disable-transitions-->
<!--                  class="xr-tag"-->
<!--                  color="#ECEEF2"-->
<!--                  size="mini">-->
<!--                  <i class="wk wk-icon-work-card" />{{ detailData.jobNumber|| '&#45;&#45;' }}-->
<!--                </el-tag>-->
<!--              </el-tooltip>-->

              <el-tooltip
                :content="`部门：${detailData.deptPath|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-layer" />{{ detailData.deptPath || '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`员工状态：${getEmployeeStatusName(detailData.status)|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-time" />{{ getEmployeeStatusName(detailData.status)|| '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`任职日期：${detailData.dateOfEmployment|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-status" />{{ detailData.dateOfEmployment|| '--' }}
                </el-tag>
              </el-tooltip>

              <el-tooltip
                :content="`年龄：${detailData.age|| '--'}`"
                effect="dark"
                placement="top">
                <el-tag
                  disable-transitions
                  class="xr-tag"
                  color="#ECEEF2"
                  size="mini">
                  <i class="wk wk-icon-cake" />{{ detailData.age || '--' }}
                </el-tag>
              </el-tooltip>
            </div>
          </div>
        </div>
      </wk-detail-header>
      <el-tabs
        v-model="tabCurrentName"
        class="side-detail__tabs--default">
        <el-tab-pane
          v-for="(item, index) in tabNames"
          :key="index"
          :label="item.label"
          :name="item.name"
          lazy>
          <component
            :is="item.name"
            :id="id"
            class="side-detail-tabs-content"
            style="padding: 16px 0;"
            @handle="relativeHandle" />
        </el-tab-pane>
      </el-tabs>
    </flexbox>
  </slide-view>
</template>

<script>
import { hrmEmployeeQueryByIdAPI } from '@/api/hrm/employee'

import SlideView from '@/components/SlideView'
import WkDetailHeader from '@/components/WkDetailHeader'
import SalaryArchivesInfo from './components/Info'
import SalaryArchivesRecords from './components/Records'

import { timeToFormatTime } from '@/utils'
import { employeeModel } from '@/views/hrm/employee/model/employee'
import { mapGetters } from 'vuex'
import EditImage from "@/components/EditImage.vue";

export default {
  // 薪资档案详情
  name: 'SalaryArchivesDetail',
  components: {
    EditImage,
    WkDetailHeader,
    SlideView,
    SalaryArchivesInfo,
    SalaryArchivesRecords
  },
  mixins: [],

  provide() {
    return {
      'editAuth': this.editAuth
    }
  },
  props: {
    // 详情信息id
    id: [String, Number],
    // 监听的dom 进行隐藏详情
    listenerIDs: {
      type: Array,
      default: () => {
        return ['crm-main-container']
      }
    },
    // 不监听
    noListenerIDs: {
      type: Array,
      default: () => {
        return []
      }
    },
    noListenerClass: {
      type: Array,
      default: () => {
        return ['el-table__body']
      }
    }
  },
  data() {
    return {
      showEditImage: false,
      editFile: null,
      editImage: null,
      loading: false, // 展示加载loading
      detailData: null,
      tabNames: [
        { label: '薪资信息', name: 'SalaryArchivesInfo' },
        { label: '调薪记录', name: 'SalaryArchivesRecords' }
      ],
      tabCurrentName: 'SalaryArchivesInfo'
    }
  },

  computed: {
    ...mapGetters([
      'hrm'
    ])
  },
  watch: {
    id: function(val) {
      this.getDetail()
    }
  },
  mounted() {
  },
  methods: {
    handleChangeAvatar() {
      return;
    },

    /**
     * 上传提交头像修改
     * @param data
     */
    submitImage(data) {
      this.loading = true
      const param = new FormData()
      param.append('userId', this.detailData.userId)
      param.append('file', data.blob, data.file.name)
      adminUsersUpdateAvatarAPI(param).then((res) => {
        //将图片保存到个人附件
        hrmEmployeeFileAddAPI({
          employeeId: this.id,
          subType: 13,
          fileId: res.data
        }).then(response => {
        }).catch(() => {
        })
        hrmEmployeeQueryByIdAPI(this.id)
            .then(res => {
              this.loading = false
              const data = res.data || {}
              data.entryTime = timeToFormatTime(data.entryTime)
              this.detailData = data
            }).catch(() => {
          this.loading = false
        })
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 图片操作
     * @param event
     */
    uploadFile(event) {
      const files = event.target.files
      const file = files[0]
      const reader = new FileReader()
      const self = this
      reader.onload = function(e) {
        let result
        if (typeof e.target.result === 'object') {
          // 把Array Buffer转化为blob 如果是base64不需要
          result = window.URL.createObjectURL(new Blob([e.target.result]))
        } else {
          result = e.target.result
        }
        self.editImage = result
        self.editFile = file
        self.showEditImage = true
        e.target.value = ''
      }
      reader.readAsDataURL(file)
    },
    getDetail() {
      this.loading = true
      hrmEmployeeQueryByIdAPI(this.id)
        .then(res => {
          this.loading = false
          const data = res.data || {}
          data.entryTime = timeToFormatTime(data.entryTime)

          this.detailData = data
        })
        .catch(() => {
          this.loading = false
        })
    },

    /**
     * 员工状态展示值
     */
    getEmployeeStatusName(status) {
      return status ? employeeModel.statusValue[parseInt(status)] : ''
    },

    /**
     * 点击关闭按钮隐藏视图
     */
    hideView() {
      this.$emit('close')
    },

    /**
     * 相关模块的操作
     */
    relativeHandle(data) {
      this.$emit('handle', data)
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/side-detail.scss";

.employee-header {
  &__top {
    .name {
      font-size: 20px;
      font-weight: bold;
    }

    .post {
      margin-left: 8px;
      font-size: 12px;
      font-weight: bold;
    }
  }

  &__bottom {
    margin-top: 10px;

    .xr-tag {
      color: $--color-text-regular;
      border: none;

      ::v-deep i {
        margin-right: 5px;
        font-size: 12px;
      }
    }

    .xr-sex-tag {
      border: none;

      ::v-deep i {
        font-size: 12px;
        color: white;
      }

      &.is-man {
        background: #3875ff;
      }

      &.is-woman {
        background: #ff3838;
      }
    }
  }
  .user-box {
    margin-top: 20px;
    .user-img {
      margin-right: 20px;
    }
  }
}

.side-detail__tabs--default {
  padding: 0 20px;
}
.side-detail__tabs--default {
  padding: 0 20px;
}
.vux-flexbox.xr-detail-header.vux-flex-row {
  padding: 0 20px;
}
.employee-header__top .name {
  font-size: 30px;
}
.employee-header__top .post {
  font-size: 18px;
}
.employee-header__bottom .xr-tag {
  font-size: 16px;
}
</style>
